<template>
  <div class="all">
    <aside class="bg_gry">
      <header>
        <img :src="IMGBASE64.LOGO2X">
      </header>
      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
         unique-opened router v-show="!collapsed"  theme="light">
        <template v-for="(item,index) in routes" v-if="!item.hidden">
          <el-submenu :index="index+''" v-if="!item.leaf">
            <template slot="title">
              <img :src="item.img">
              <i :class="item.iconCls"></i>{{item.name}}
            </template>
            <el-menu-item v-for="child in item.children" :key="item.name" :index="child.path" v-if="!child.hidden" style="height: 42px; line-height: 42px;" v-on:click="changePage(item, child)">{{child.name}}</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </aside>

    <div :class="{'header': style1, 'header_underline': style2}">
      <div class="field" v-show="headerFieldShow">
        <span v-model="fname">{{fname}}</span>
        >
        <span v-model="cname">{{cname}}</span>
      </div>
      <div class="right">
        <el-badge :value="number">
          <img @click="tipShowF" src="./../assets/images/Home1/gongzuotongzhi@2x.png">
        </el-badge>
        <div class="user">
          <img src="./../assets/images/Home1/ren@2x.png">
          <span @click="selectShowF">李俊怡</span>
          <i class="fa fa-caret-down" aria-hidden="true"></i>
        </div>
      </div>
    </div>
    <section class="content-container" ref="lalar" @scroll="handleScroll">
      <div class="selectBox" v-show="selectShow">
        <ul>
          <li v-for="select in selectList" @click="routerTo(select)">
            <img>
            <p class="color">{{select.laber}}</p>
          </li>
        </ul>
      </div>
      <div class="selectBox tipsBox" v-show="tipShow">
        <ul>
          <li v-for="tip in tipsList">
            <img>
            <p>{{tip.laber}}</p>
            <span v-show="tip.num !== null">{{tip.num}}</span>
          </li>
        </ul>
      </div>
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </section>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        selectShow: false,
        tipShow: false,
        selectList: [{
          img: '',
          laber: '修改我的信息',
          path: '/teacherInformation/myManage'
        }, {
          img: '',
          laber: '注销',
          path: '/'
        }],
        tipsList: [{
          img: '',
          laber: '文件传阅通知',
          num: '3'
        }, {
          img: '',
          laber: '协同办公通知',
          num: null
        }],
        style1: true,
        style2: false,
        number: 2,
        currentShowMeun: '',
        k: -1,
        collapsed: false,
        headerFieldShow: false,
        fname: '',
        cname: '',
        xtoken: '',
        routes: []
      }
    },
    mounted () {
      // this.getUrl()
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.routes = this.$router.options.routes
      this.$http.post(this._httpUrl + 'auth/user',
        {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
          if (response.body.code === '000') {
            let asdf = []
            let qwer = []
            for (var i = 0; i < response.data.data.sysMenuList.length; i++) {
              asdf.push(response.data.data.sysMenuList[i].resourceCode)
              // console.log(response.data.data.sysMenuList[i].subMenuList)
              if (response.data.data.sysMenuList[i].subMenuList !== null) {
                for (var a = 0; a < response.data.data.sysMenuList[i].subMenuList.length; a++) {
                  qwer.push(response.data.data.sysMenuList[i].subMenuList[a].resourceCode)
                }
              }
            }
            // console.log(this.routes)
            for (var b = 2; b < this.routes.length; b++) {
              if (asdf.indexOf(this.routes[b].code) >= 0) {
                // this.routes[b].hidden = !this.routes[b].hidden
                this.$set(this.routes[b], 'hidden', false)
                for (var c = 0; c < this.routes[b].children.length; c++) {
                  if (qwer.indexOf(this.routes[b].children[c].code) >= 0) {
                    this.$set(this.routes[b].children[c], 'hidden', false)
                  }
                }
              }
            }
            // console.log(this.routes)
            // console.log(asdf)
            // console.log(response.data.data.sysMenuList[0].subMenuList)
          } else if (response.body.code === '887') {
            this.$router.push('/')
          } else if (response.body.code === '889') {
            this.$router.push('/')
          }
        }, function (response) {
          // this.$router.go('/404')
        }
      )
    },
    methods: {
      routerTo (select) {
        this.$router.push(select.path)
        this.selectShow = false
        if (select.laber === '注销') {
          localStorage.removeItem('xtoken')
          // var exp = new Date()
          // exp.setTime(exp.getTime() - 1)
          // var cval = document.cookie
          // if (cval !== null) {
          //   document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
          // }
          console.log(document.cookie)
          this.$router.push(select.path)
        }
      },
      tipShowF () {
        this.tipShow = !this.tipShow
        this.selectShow = false
      },
      selectShowF () {
        this.selectShow = !this.selectShow
        this.tipShow = false
      },
      // getUrl () {
      //   for (var i = 0; i < this.$router.options.routes.length; i++) {
      //     if (i > 1) {
      //       for (var j = 0; j < this.$router.options.routes[i].children.length; j++) {
      //         if (this.$route.name === this.$router.options.routes[i].children[j].name) {
      //           this.fname = this.$router.options.routes[i].name
      //           this.headerFieldShow = true
      //         }
      //       }
      //     }
      //   }
      //   this.cname = this.$route.name
      // },
      handleScroll () {
        // console.log(this.$refs.lalar.scrollTop)
        if (this.$refs.lalar.scrollTop === 0) {
          this.style1 = true
          this.style2 = false
        } else {
          this.style1 = false
          this.style2 = true
        }
      },
      handleopen (key, keyPath) {
        // console.log(key)
        // console.log(this.$router.options.routes[key].name)
      },
      handleclose () {
        // alert('close')
      },
      handleselect (key, keyPath) {
        // console.log(key)
        // console.log(this.$router.options.routes[key].name)
      },
      changePage (item, child) {
        this.fname = item.name
        this.cname = child.name
        this.headerFieldShow = true
      },
      collapse () {
        this.collapsed = !this.collapsed
      }
    }
  }
</script>
<style>
  @-webkit-keyframes changeColor{
    0% {
      top: 40px;
      opacity: 0;
    }
    100% {
      top: 54px;
      opacity: 1;
    }
  }
  .tipsBox{
    right: 12.4% !important;
    width: 16% !important;
  }
  .tipsBox ul li{
    position: relative;
  }
  .tipsBox ul li img{
    margin-left: 6% !important;
    margin-right: 3% !important;
  }
  .tipsBox ul li span{
    position: absolute; top: 8px; right: 4%;
    display: inline-block;
    width: 14px; height: 14px;
    line-height: 14px;
    font-size: 13px;
    text-align: center;
    border-radius: 18px;
    background: red;
    color: #fff;
  }
  .selectBox{
    z-index: 100;
    position: fixed; top: 54px; right: 1.4%;
    background: #fff;
    width: 10%;
    border-radius: 4px;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.26);
    -webkit-animation: changeColor 0.4s;
  }
  .selectBox ul{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .selectBox ul li{
    height: 30px; line-height: 30px;
  }
  .selectBox ul li img{
    float: left;
    width: 14px; height: 14px;
    background: #ccc;
    margin-top: 9px;
    margin-left: 8%;
    margin-right: 4%;
  }
  .selectBox ul li p{
    font-size: 13px;
    cursor: pointer;
    color: #222;
  }
  .selectBox ul li p:hover{
    color: #409EFF;
  }
  .bg_gry
  {
    width: 18%;
    background: #f8f8f8;
    float: left;
  }
  .bg_gry img{
    width: 20px; height: 20px;
    margin-right: 14%;
  }
  .el-menu
  {
    padding-top: 12px;
    background: #fff;
    border-top: 1px solid #d7d7d7;
  }
  .el-menu .el-submenu
  {
    margin-left: 6%;
    width: 88%;
    border-radius: 4px;
  }
  .el-submenu__title{
    height: 52px; line-height: 52px;
    border-radius: 4px;
  }
  .el-submenu.is-opened .el-submenu__title
  {
    z-index: 2008;
    border-radius: 4px;
    /*border-top-right-radius: 8px;*/
    box-shadow:0 4px 20px 0px rgba(0,0,0,0.14), 0 7px 10px -5px rgba(32,160,255,0.4);
    background: #20A0FF;
    color: #fff;
    height: 52px; line-height: 52px;
  }
  .el-submenu.is-opened .el-submenu__title i{
    color: #fff;
  }
  .el-submenu .el-menu
  {
    top: -4px;
    border-radius: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
</style>
<style lang="less" scoped>
  @import '/static/css/all-use.css';
  .bg_gry
  {
    width: 18%;
    background: #fff;
    float: left;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
  }
  .bg_gry::-webkit-scrollbar {display:none}
  header{
    background-size: 100%;
    width: 80%;
    height: 60px;
    position: relative;
    left: 10%;
    top: 8px;
  }
  header img{
    position: absolute;
    width: 100%; height: 42px;
  }
  .leftNavigation{
    height: 100%;
  }
  .triangle {
    width: 0;
    height: 0;
    border-top: 5px solid gray;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    right: 4%;
  }
  .triangleup {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid gray;
    border-left: 5px solid transparent;
    position: absolute;
    right: 4%;
  }

  .content-container {
    width: 82%;
    // overflow-x: auto;
    // overflow-y: hidden;
    flex:1;
    position: fixed;
    top: 55px;
    bottom: 0;
    right: 0;
    overflow: visible;
    overflow-y: scroll;
    padding: 0 0 20px 0;
    // float: right;
  }
  .content-container::-webkit-scrollbar {display:none}

  .header_underline{
    width: 82%;
    float: right;
    padding: 20px 0 8px 0;
    box-shadow: 0 4px 12px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.1);
    .field{
      display: inline-block;
      // padding-top: 10px;
      margin-left: 20px;
    }
    .right{
      width: 15%;
      float: right;
      .user{
        display: inline-block;
        margin-left: 20%;
      }
    }
  }
  .header{
    width: 82%;
    float: right;
    padding: 20px 0 8px 0;
    .field{
      display: inline-block;
      // padding-top: 10px;
      margin-left: 20px;
    }
    .right{
      width: 15%;
      float: right;
      .user{
        span{
          cursor: pointer;
        }
        display: inline-block;
        margin-left: 20%;
      }
    }
  }
  .bg_gry {
    .el-submenu.is-opened {
      .el-submenu__title {
        z-index: 2 !important;
        border-radius: 8px !important;
        background: #20A0FF !important;
        color: #fff  !important;
        box-shadow: 1px 2px 1px #ccc !important;
        height: 52px;
      }
      .el-menu{
        top: -4px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        .el-menu-item{
          width: 100%;
          min-width: 0;
        }
        .el-menu-item:first-child{
          margin-top: 10px;
        }
      }
    }
  }
</style>
